<template>
  <div class="detail-comment-box">
    <h3 class="comment-title border-bottom">用户评论</h3>
    <div class="comment-list">
      <div class="comment-item border-bottom">
        <img class="comment-good" src="//s.qunarzz.com/piao/image/touch/sight/highQualityComment1.png" alt="">
        <div class="comment-stardate">
        <span class="comment-star">
          <i class="star-before  iconfont">&#xe60b;&#xe60b;&#xe60b;&#xe60b;&#xe60b;</i>
          <i class="start-after  iconfont">&#xe60b;&#xe60b;&#xe60b;&#xe60b;&#xe60b;</i>
        </span>
          <span class="comment-time">p*7&nbsp;&nbsp;2017-10-24</span>
        </div>
        <p class="comment-content">李小龙乐园很大，环境也很好。主要是不怕晒😄李小龙祖居后面有游乐设施，可以划船，还有些小动物。有山有水😻</p>
        <div class="comment-imgs">
          <div class="img-outer">
            <div class="img-inner"><img class="img-content" src="https://imgs.qunarzz.com/piao/fusion/1710/50/d7c2190f2813c402.jpg_228x168_9d96ccf6.jpg" alt=""></div>
          </div>
          <div class="img-outer">
            <div class="img-inner"><img class="img-content" src="https://imgs.qunarzz.com/piao/fusion/1710/50/d7c2190f2813c402.jpg_228x168_9d96ccf6.jpg" alt=""></div>
          </div>
          <div class="img-outer">
            <div class="img-inner"><img class="img-content" src="https://imgs.qunarzz.com/piao/fusion/1710/50/d7c2190f2813c402.jpg_228x168_9d96ccf6.jpg" alt=""></div>
          </div>
          <div class="img-outer">
            <div class="img-inner"><img class="img-content" src="https://imgs.qunarzz.com/piao/fusion/1710/50/d7c2190f2813c402.jpg_228x168_9d96ccf6.jpg" alt=""></div>
          </div>
          <div class="img-outer">
            <div class="img-inner"><img class="img-content" src="https://imgs.qunarzz.com/piao/fusion/1710/50/d7c2190f2813c402.jpg_228x168_9d96ccf6.jpg" alt=""></div>
          </div>
          <div class="img-outer">
            <div class="img-inner"><img class="img-content" src="https://imgs.qunarzz.com/piao/fusion/1710/50/d7c2190f2813c402.jpg_228x168_9d96ccf6.jpg" alt=""></div>
          </div>
          <div class="img-outer" style="display: none">
            <div class="img-inner"><img class="img-content" src="https://imgs.qunarzz.com/piao/fusion/1710/50/d7c2190f2813c402.jpg_228x168_9d96ccf6.jpg" alt=""></div>
          </div>
          <div class="comment-num">
            <div class="bg"></div>
            <p class="img-total">共7张</p>
          </div>
        </div>
      </div>
      <div class="comment-item border-bottom">
        <div class="comment-stardate">
        <span class="comment-star">
          <i class="star-before  iconfont">&#xe60b;&#xe60b;&#xe60b;&#xe60b;&#xe60b;</i>
          <i class="start-after  iconfont">&#xe60b;&#xe60b;&#xe60b;&#xe60b;&#xe60b;</i>
        </span>
          <span class="comment-time">u*1&nbsp;&nbsp;2018-03-23</span>
        </div>
        <p class="comment-content">
          好山好水。喜欢这种自然又有意义地方。
        </p>
        <div class="comment-imgs">
          <div class="img-outer">
            <div class="img-inner"><img class="img-content" src="https://imgs.qunarzz.com/piao/fusion/1803/30/9938c8459bb20602.jpg_228x168_2fb29dcf.jpg" alt=""></div>
          </div>
          <div class="img-outer">
            <div class="img-inner"><img class="img-content" src="https://imgs.qunarzz.com/piao/fusion/1710/50/d7c2190f2813c402.jpg_228x168_9d96ccf6.jpg" alt=""></div>
          </div>
          <div class="img-outer">
            <div class="img-inner"><img class="img-content" src="https://imgs.qunarzz.com/piao/fusion/1803/f3/e814c32828732302.jpg_228x168_1be13c6a.jpg" alt=""></div>
          </div>
          <div class="img-outer">
            <div class="img-inner"><img class="img-content" src="https://imgs.qunarzz.com/piao/fusion/1710/50/d7c2190f2813c402.jpg_228x168_9d96ccf6.jpg" alt=""></div>
          </div>
          <div class="img-outer">
            <div class="img-inner"><img class="img-content" src="https://imgs.qunarzz.com/piao/fusion/1710/50/d7c2190f2813c402.jpg_228x168_9d96ccf6.jpg" alt=""></div>
          </div>
          <div class="comment-num">
            <div class="bg"></div>
            <p class="img-total">共5张</p>
          </div>
        </div>
      </div>
    </div>
    <div class="comment-more">查看全部评论<span class="more-icon">&gt;</span></div>
  </div>
</template>

<script>
export default {
  name: 'DetailComment'
}
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles"
  .border-bottom:before
    border-color #ccc
  .detail-comment-box
    background #fff
    margin-top .2rem
    padding-left .2rem
    .comment-title
      font-size .3rem
      line-height $headerHeight
      line-height $headerHeight
      text-indent .4rem
      &:after
        content ''
        position absolute
        top .33rem
        left .2rem
        width .06rem
        height .25rem
        background #1ba9ba
        margin-right .24rem
    .comment-item
      position: relative
      padding .1rem .2rem .3rem .2rem
      .comment-good
        position: absolute
        top .2rem
        right .2rem
        width 1.42rem
        height .96rem
      .comment-stardate
        margin-top .1rem
        line-height .6rem
        .comment-star
          position relative
          display inline-block
          width 1.66rem
          height .28rem
          line-height .28rem
          font-size .28rem
          .star-before,
          .star-after
            overflow hidden
            position absolute
            left 0
            top .04rem
            height .28rem
          .star-before
            color #ddd
            width 100%
            z-index 1
          .star-after
            color #ffb436
            z-index 2
        .comment-time
          position relative
          float right
          top .16rem
          margin-left .2rem
          line-height .28rem
          font-size .24rem
          vertical-align middle
          color: #212121
      .comment-content
        word-break break-all
        word-wrap break-word
        font-size .26rem
        line-height .42rem
        color #616161
      .comment-imgs
        position: relative
        margin .2rem 0 .1rem
        overflow hidden
        .img-outer
          float left
          width 33.33%
          margin-bottom .1rem
          .img-inner
            margin-left .07rem
            margin-right .07rem
            .img-content
              width 100%
        .comment-num
          position absolute
          right 0
          bottom .8rem
          .bg
            background rgba(0,0,0,.5)
            width .94rem
            height .4rem
            position absolute
            right .07rem
            border-top-left-radius .2rem
            border-bottom-left-radius .2rem
          .img-total
            position absolute
            right .07rem
            width .94rem
            height .4rem
            line-height .4rem
            font-size .24rem
            color #fff
            text-align right
            padding-right .05rem
    .comment-more
      text-align center
      color #616161
      height .8rem
      line-height .8rem
      .more-icon
        margin-left .3rem
</style>
